import router from '@/router'
import store from '@/store'
// import { asyncRoutes } from '@/router/index'
// 导航守卫
router.beforeEach(async(to, from, next) => {
  // 判定是否有token
  if (store.getters.token) {
    // 有token代表已登录
    // 判定是否去登录页,如果是,跳转到首页
    if (to.path === '/login') {
      next('/')
    } else {
      // 去其他页面放行
      // 在这里是确定了用户已经登录,进入一个非登录页的其他正常页面
      // 进去之前要先获取一下数据,这样能够保证无论进入哪个页面vuex当中都能获取用户数据
      // store.dispatch('user/getProfile)
      // 当我们设置以上的数据获取之后,完成了无论哪个页面都能获取用户数据,但每跳转一次页面都会重新发一次请求
      // 所以我们需要进行一个判定,如果vuex里面的profile有值,就不再发送请求,同时因为请求是异步操作,无法保证进入页面能有获取用户信息,所以要用async await
      if (!store.state.user.profile) {
        await store.dispatch('user/getProfile')
        // 这里获取了完整的数据位置
        // 可以在这里进行路由的筛选和追加
        // 1.拿到所有的动态路由数组 asyncRoutes
        // 2.拿到当前用户的menus数组 下面
        // const menus = store.state.user.profile.roles.menus
        // 通过filter过滤方法,将符合条件的保留到新数组routes中,没有的剔除,includes方法是判断一个数组是否包含一个指定的值,包含反悔true,否则返回false
        // const routes = asyncRoutes.filter(item => menus.includes(item.name))

        // 以上的逻辑需要定义在vuex中,方便与其他逻辑(显示路由操作)共享,这里可以调用以上定义在vuex中的逻辑
        const routes = await store.dispatch('permission/filterRoutes')
        // 使用一个路由实例方法addRoutes 可以追加路由配置,恢复url的直接访问(与菜单无关)
        router.addRoutes([
          ...routes,
          // 404保底操作,一定要放在最后面,等所有的路由加载完,如果没有路由才会排到404,所以要把它从静态路由挪到这里
          { path: '*', redirect: '/404', hidden: true }
        ])
        // 访问页面的逻辑是进入页面,通过导航守卫之后再加载上面的动态路由数据,所以解决完404后会出现一片空白,原因是导航守卫在校验的时候没能拿到路由数据
        // 我们可以通过再一次进入页面就可以获取到数据
        next(to.path)
        return
      }
      next()
    }
  } else {
    // 没有token代表未登录
    // 定义白名单,里面是登录页和404页面
    const whileList = ['/login', '/404']
    // 通过indexOf来判定,不等于-1代表是去登录页或404,直接放行
    // 当前判定是否去登录页还可以用includes来判定，includes代表包含,
    // 如果包含返回true,不包含返回false
    // if（whileList.includes(to.path))   前往的页面是否包含登录页或404
    if (whileList.indexOf(to.path) !== -1) {
      next()
    } else {
      // 不是去登录页，因为没有token，跳转到登录页让用户登录
      next('/login')
    }
  }
})
